﻿<template>
    <div class="person">
        <p>Welcome to your Vue.js app. Person</p>
        <hr>
        <p>name:{{ name }}</p>
        <p>age:{{ age }}</p>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">查看联系方式</button>
    </div>
</template>

<script lang="ts">
    export default {
        
        name: 'Person',
        beforeCreate(){
            console.log("beforeCreate")
        },
        /*
            // vue2 写法
            data(){
                return{
                    name:"zhangsan",
                    age:19,
                    tel:"13811112222"
                }
            },

            methods:{
                changeName(){
                    this.name = "zhang-san"
                },
                changeAge(){
                    this.age += 1
                },
                showTel(){
                    alert(this.tel)
                }
            },
        */  
        
        /*
            vue3写法
            setup 函数中this是undefined vue3已经开始弱化this数据，原始写在data中。
        */
        // setup(){
        //     // 1. 数据
        //     let name = "zhangsan"   // name 不是响应式
        //     let age =19             // age 不是响应式
        //     let tel="13811112222"
            
        //     // 2. 方法
        //     function changeName(){
        //         console.log(1)
        //         name = "zhang-san"
        //     }
        //     function changeAge(){
        //         console.log(2)
        //         age += 1
        //     }
        //     function showTel(){
        //         console.log(3)
        //         alert(tel)
        //     }
        //     /*
        //     setup函数，返回值将数据、方法交出去，模版中才能使用。
        //     返回值也可以是渲染函数
        //         return function(){
        //             return "哈哈"
        //         }
        //         箭头函数（了解）
        //         return ()=> '哈哈'

        //     */
        //     // 将数据、方法交出去，模版中才能使用
        //     // return {a:name,b:age,c:tel}
        //     // return {name,age,tel}
        //     // return {name:name,age:age,tel:tel}
        //     return {name,age,tel,changeName,changeAge,showTel}

        // }
    }
</script>

<script lang = "ts" setup>
    let name = "zhangsan"   // name 不是响应式
    let age =19             // age 不是响应式
    let tel="13811112222"
    
    // 2. 方法
    function changeName(){
        console.log(1)
        name = "zhang-san"
    }
    function changeAge(){
        console.log(2)
        age += 1
    }
    function showTel(){
        console.log(3)
        alert(tel)
    }
</script>
<style scoped>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px;
    }
</style>